<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-if="formThead.username" v-model="listQuery.username" style="width: 200px;" class="filter-item" placeholder="用户名" @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.nickname" v-model="listQuery.nickname" style="width: 200px;" class="filter-item" placeholder="昵称" @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.phone" v-model="listQuery.phone" style="width: 200px;" class="filter-item" placeholder="手机" @keyup.enter.native="handleFilter"/>
      <el-select
        v-if="formThead.status"
        v-model="listQuery.status"
        class="filter-item"
        placeholder="请选择状态"
        clearable
        @keyup.enter.native="handleFilter">
        <el-option
          v-for="item in status"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <addPage @getLists="getLists"/>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.username" label="用户名">用户名</el-checkbox>
      <el-checkbox v-model="formThead.nickname" label="昵称">昵称</el-checkbox>
      <el-checkbox v-model="formThead.phone" label="phone">手机</el-checkbox>
      <el-checkbox v-model="formThead.head_img" label="头像">头像</el-checkbox>
      <el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>
    </div>

    <el-table :key="tableKey" :data="list" :v-loading="listLoading" border fit highlight-current-row style="width: 100%;">
      <el-table-column v-if="formThead.username" align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.nickname" align="center" label="昵称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.phone" align="center" label="手机">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.head_img" align="center" label="头像">
        <template slot-scope="scope">
          <img
            :src="scope.row.head_img"
            style="width: 80px;height: 80px;border: 0;border-radius: 40px"
            @click="bigImg(scope.row.id)">
          <transition name="el-zoom-in-top">
            <div v-show="scope.row.id === listItemId" class="bigImg" @click="bigImg">
              <img :src="scope.row.head_img">
            </div>
          </transition>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.shop_name" align="center" label="权限">
        <template slot-scope="scope">
          <span>{{ scope.row.shop_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.status" align="center" label="状态">
        <template slot-scope="scope">
          <!--<span>{{ scope.row.status }}</span>-->
          <span v-if="scope.row.status===1"><i class="el-icon-circle-check" style="color: #67C23A"/></span>
          <span v-else><i class="el-icon-circle-close" style="color: #ebb563"/></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope" >
          <editPage :row_data="scope.row" @getLists="getLists"/>
          <el-button v-if="scope.row.is_sup_admin !== 1" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getList, del } from '@/api/user/admin_user'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: { addPage, editPage },
  data() {
    return {
      status: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listItemId: null,
      listQuery: {
        id: undefined,
        username: undefined,
        password: undefined,
        nickname: undefined,
        phone: undefined,
        head_img: undefined,
        status: undefined,
        shop_name: undefined,
        is_sup_admin: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: true,
        username: true,
        password: true,
        nickname: true,
        phone: true,
        head_img: true,
        status: true,
        shop_name: true
      }
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    bigImg(id) {
      if (id > 0) {
        this.listItemId = id
      } else {
        this.listItemId = null
      }
    },
    getLists() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    del(id) {
      this.$message.info('正在删除' + id)
      del(store.getters.token, { id: id }).then(res => {
        this.$message.info('已经删除' + id)
        this.getLists()
      })
    }
  }
}
</script>
<style>
  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .bigImg img{
    max-width: 650px;
    min-width: 235px;
  }
</style>
